<template>
  <div>
    <h1>Hello, modularity!</h1>
    <button id="popoverButton" type="button" class="btn btn-primary btn-lg" data-bs-toggle="popover"
      title="ESM in Browser" data-bs-content="Bang!">
      Custom popover
    </button>
    <!-- 到达指定宽度之前为100% -->
    <div class="container-sm">100% wide until small breakpoint</div>
    <div class="container-md">100% wide until medium breakpoint</div>
    <div class="container-lg">100% wide until large breakpoint</div>
    <div class="container-xl">100% wide until extra large breakpoint</div>
    <div class="container-xxl">100% wide until extra extra large breakpoint</div>
    <h1>栅格</h1>
    <!-- 一般的表格结构 col[-x] row有12个-->
    <div class="row">
      <div class="col">
        Column
      </div>
      <div class="col">
        Column
      </div>
      <div class="col">
        Column
      </div>
    </div>
      <!-- col 是最小的单位。此时px无论如何都会水平铺开，col-md在md之前都是堆叠（stack）的，一堆元素堆在一起取最小的决定 -->
    <div class="container text-center">
      <!-- Stack the columns on mobile by making one full-width and the other half-width -->
      <div class="row">
        <div class="col-md-8">.col-md-8</div>
        <div class="col-6 col-md-4">.col-6 .col-md-4</div>
      </div>

      <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
      <div class="row">
        <div class="col-6 col-md-4">.col-6 .col-md-4</div>
        <div class="col-6 col-md-4">.col-6 .col-md-4</div>
        <div class="col-6 col-md-4">.col-6 .col-md-4</div>
      </div>

      <!-- Columns are always 50% wide, on mobile and desktop -->
      <div class="row">
        <div class="col-12 col-md-4">col-12 col-md-4</div>
        <div class="col-6 col-md-8">col-6 col-md-8</div>
      </div>
    </div>

<h1>插入</h1>
    <div class="container text-center">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped></style>